<template>
    <div class="main-box">
        <div class="title">标题</div>
        <div class="operation">
            <div class="operation-bar">
                <div class="left-bar">
                    <el-button @click="openDialog(null)" type="primary">
                        <i class="iconfont icon-jiahao"></i>
                        <span>新增分类</span>
                    </el-button>
                    <el-button @click="delBatch" type="danger">
                        <i class="iconfont icon-jiahao"></i>
                        <span>批量删除</span>
                    </el-button>
                </div>
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;">
                            <el-input v-model="queryData.categoryName" clearable style="width: 200px;" placeholder="请输入分类名称">
                                <template v-slot:prefix>
                                    <i class="iconfont icon-sousuo"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getPage" type="primary">
                                <i class="iconfont icon-sousuo" style="margin-right: 5px;"></i>搜索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" default-expand-all row-key="id" border  @selection-change="doSelectionChange" v-loading="tableLoading"  style="height:100%;">

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column  label="分类名称">
                    <template #default="scope">
                        {{ scope.row.categoryName }}
                    </template>
                </el-table-column>
                <el-table-column prop="articleCount" label="文章量"  align="center" ></el-table-column>
                <el-table-column align="center" label="创建时间" >
                    <template #default="scope">
                        <div v-if="scope.row.createTime"><i class="iconfont icon-shijian1 mr5"></i>{{ scope.row.createTime }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button  @click="openDialog(scope.row,2)" type="primary" link size="small">
                            <i class="iconfont icon-jiahao mr5"></i>
                            添加子分类
                        </el-button>
                        <el-button  @click="openDialog(scope.row)" type="primary" link size="small">
                            <i class="iconfont icon-bianji mr5"></i>
                            编辑
                        </el-button>
                        <el-popconfirm width="170" 
                            @confirm="del(scope.row)"
                            confirm-button-text="确定" cancel-button-text="取消" title="确认删除此项吗?">
                            <template #reference>
                                <el-button v-if="!scope.row.children || scope.row.children.length == 0"
                                    type="primary" link size="small">
                                    <i class="iconfont icon-lajixiang mr5"></i>
                                    删除2
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <Dialog :dialog="dialog" @confirm="handleConfirm">
            <el-form :model="categoryForm" size="large" label-width="80px">
                <el-form-item prop="parentId" label="父级分类" >
                    <el-tree-select :disabled="type==2" v-model="categoryForm.parentId" check-strictly default-expand-all :data="categoryTreeSelectData" 
                        placeholder="请选择父节点"
                        :props="defaultProps" :render-after-expand="false" style="width: 100%;"/>
                </el-form-item>
                <el-form-item prop="categoryName" label="分类名称" >
                    <el-input v-model="categoryForm.categoryName"></el-input>
                </el-form-item>
                <el-form-item prop="orders" label="排序值" >
                    <el-input-number v-model="categoryForm.orders"></el-input-number>
                </el-form-item>
            </el-form>
        </Dialog>

    </div>
</template>

<script>
    export default {
        name: 'Blank'
    }
</script>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'
import Dialog from '@/components/Dialog.vue'
import { queryCategoryTreeList,createCategory,updateCategory,delBatchCategory } from '@/api/categoryApi'


// 表格 数据
let tableData = ref([])
const queryData = reactive({
    categoryName:''
})
// 表格加载
let tableLoading = ref(false)

// 获取分页数据
function getPage() {
    tableLoading.value = true
    queryCategoryTreeList(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res
    })
}





onMounted(() => {
    getPage()
})



let defaultProps = {
    children: 'children',
    label: 'categoryName',
    value: 'id'
}

// 弹框相关数据, 必须有visible-控制显示/隐藏、title-控制标题
let dialog = ref({
    title:'新增分类',
    visible:false
}) 

// 弹框中的表单数据
let categoryForm = ref({
    categoryName: '',
    parentId:null,
    orders:1,
})

// 下拉树选项
let categoryTreeSelectData = computed({
    get() {
        return [{id:0,categoryName:'顶级分类',children:tableData.value}]
    }
})

// 2表示添加子分类
const optType = ref(0)

// 打开弹框, 根据是否传入数据区分新增和编辑
function openDialog(row,type) {
    console.log('row11',row);
    if(type == 2) {
        optType.value = 2 // 表示添加子分类
        categoryForm.value = {parentId: row.id, orders:1}
    } else if(!row) {
        categoryForm.value = { orders: 1,parentId:0 }
    } else {
        categoryForm.value = JSON.parse(JSON.stringify(row))
    }
    dialog.value.visible = true
}


// 弹框点击确认
function handleConfirm() {
    if(categoryForm.value.id) {
        let {id,parentId,categoryName,orders} = categoryForm.value
        updateCategory({id,parentId,categoryName,orders}).then(res=>{
            dialog.value.visible = false
            Messager.ok('更新成功')
            getPage()
        })
    } else {
        createCategory(categoryForm.value).then(res=>{
            Messager.ok('保存成功')
            dialog.value.visible = false
            getPage()
        })
        optType.value = 0// 重置状态
    }


}

// 删除提示
function del(row) {
    MsgBoxer.confirm(`确认删除该${row.categoryName}吗?`).then(() => {
        delBatchCategory([row.id]).then(res => {
            Messager.ok('删除成功')
            getPage()
        })
    })
}


// 批量操作
let selectedIds = ref([])
function doSelectionChange(selection) {
    selectedIds.value = []
    selection.forEach((row) => {
        selectedIds.value.push(row.id)
    })
}

function delBatch() {
    MsgBoxer.confirm('是否批量删除这 ' + selectedIds.value.length + ' 个').then(() => {
        delBatchCategory(selectedIds.value).then(() => {
            Messager.ok('批量删除成功')
            getPage()
        })
    })
}



</script>

<style lang="scss">
    .main-box {
        display: flex;
        flex-direction: column;

        .table-box {
            flex: 1;
            overflow: hidden;
        }
    }

    .operation-bar {
        display: flex;
    }
</style>